<template>
  <div class="start-adver">

      <Breadcrumb>
          <BreadcrumbItem>活动设置</BreadcrumbItem>
          <BreadcrumbItem>活动启动广告</BreadcrumbItem>
      </Breadcrumb>

      <Form :model="form_data">
          <FormItem label="是否开启启动广告">
              <i-switch v-model="form_data.start_adver" size="large">
                  <span slot="open">开启</span>
                  <span slot="close">关闭</span>
              </i-switch>
          </FormItem>

          <FormItem label="广告链接">
              <br />
              <Input v-model="form_data.adver_url" placeholder="请输入广告链接" style="width: 300px" />
          </FormItem>

          <FormItem label="广告显示时间间隔(0=每次进入活动页面都显示广告)">
              <br />
              <Input v-model="form_data.interval_time" style="width:150px;">
                  <Select v-model="form_data.interval_unit" slot="append" style="width: 70px">
                      <Option value="minute">分钟</Option>
                      <Option value="hour">小时</Option>
                  </Select>
              </Input>
          </FormItem>

          <FormItem label="广告图片(推荐尺寸：375px*667px)">
              <ImageInput v-model="form_data.adver_image" style="width:40%;" @change="imageInputChange" @remove="removeImage"></ImageInput>
          </FormItem>

          <FormItem>
              <Button type="primary" @click="submit(form_data)">确定设置</Button>
          </FormItem>
      </Form>
  </div>
</template>

<script>
import Common from '../../common/common.js';
import ImageInput from '../../components/ImgInput/ImgInput.vue';
export default {
  name: 'start-adver',
  data(){
    return {
        activity_id:0,
        form_data:{
            start_adver:true,
            adver_url:'',
            interval_time:0,
            interval_unit:'minute',
            adver_image:''
        }
    }
  },
  components:{
    ImageInput
  },
    created(){
      this.activity_id = sysinfo.activity_id;
    },
  mounted(){
    this.find();
  },
  methods:{
      //获取广告数据
      find(){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'adver',
            doing:'find',
            activity_id:sysinfo.activity_id
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    var data = res.data.data;
                    this.form_data = {
                        start_adver:data.start_adver,
                        adver_url:data.adver_url,
                        interval_time:data.interval_time,
                        interval_unit:data.interval_unit,
                        adver_image:data.adver_image ? data.adver_image : ''
                    }
                }
            })
            .catch(error=>console.log(error));
      },
      //提交设置
      submit(data){
          if(data.interval_time != parseInt(data.interval_time) || parseInt(data.interval_time) < 0){
              this.$Message.error('请输入正确的时间间隔');
              return false;
          }
          if(data.start_adver && data.adver_image == ''){
              this.$Message.error('请上传一张图片');
              return false;
          }
          Axios.post(sysinfo.url,Qs.stringify({
              pages:'adver',
              doing:'submit',
              activity_id: sysinfo.activity_id,
              data
          }))
              .then((res)=>{
                  if(res.data.status == 'success'){
                      this.$Message.success('设置成功');
                  }else{
                      this.$Message.success('设置失败');
                  }
              })
              .catch(data=>console.log(data));
      },
      //图片上传组件value改变
      imageInputChange(res){
          this.form_data.adver_image = res;
      },
      //删除上传图片
      removeImage(){
          this.form_data.adver_image = '';
      }
  }
}
</script>

<style scoped>
    .start-adver{
        padding:10px;
    }
</style>
